<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>涟漪效果按钮</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="bt">
      遇见另一个视界
      <script>
        //找到按钮元素
        const bt = document.querySelector("div.bt");
        //绑定按钮的点击事件
        bt.addEventListener("click", (e) => {
          //获取按钮的偏移量，位置坐标中的left和top
          //此处为按钮左上角，距离页面左侧和顶部的距离
          let offsetLeft = e.target.offsetLeft;
          let offsetTop = e.target.offsetTop;
          //解决原例子中的一个bug,当点击空白处并且连续点击点击两次以上
          //会点击在span元素中。所以获取的offset相关值是span的
          //而不是div的，导致计算位置是错误的
          if (e.target.nodeName == "SPAN") {
            //如果点击了span元素，则获取span的上级父元素DIV的offset相关值
            offsetLeft = e.target.offsetParent.offsetLeft;
            offsetTop = e.target.offsetParent.offsetTop;
          }
          //计算span的坐标
          let x = e.clientX - offsetLeft;
          let y = e.clientY - offsetTop;

          //定义span
          let ripple = document.createElement("span");
          ripple.style.left = x + "px";
          ripple.style.top = y + "px";
          //将ripple插入到bt中
          bt.appendChild(ripple);

          //增加计时器，每秒钟自动将当前span清理掉，不至于越来越多
          setTimeout(() => {
            ripple.remove();
          }, 1000);
        });
      </script>
    </div>
  </body>
</html>
